<template>
  <div>
    <el-table :data="showPage" tooltip-effect="light" :stripe=true :border=true>
      <el-table-column show-overflow-tooltip label="ID" min-width="40%" prop="id"></el-table-column>
      <el-table-column show-overflow-tooltip label="书名" min-width="40%" prop="book_name"></el-table-column>
      <el-table-column show-overflow-tooltip label="作者" min-width="40%" prop="author"></el-table-column>
      <el-table-column show-overflow-tooltip label="出版社" min-width="40%" prop="publisher"></el-table-column>
      <el-table-column show-overflow-tooltip label="出版时间" min-width="40%" prop="publish_time"></el-table-column>
      <el-table-column show-overflow-tooltip label="标签号" min-width="40%" prop="isbn"></el-table-column>
      <el-table-column show-overflow-tooltip label="类型" min-width="40%" prop="book_type"></el-table-column>
      <el-table-column show-overflow-tooltip label="入库时间" min-width="40%" prop="add_time"></el-table-column>
      <el-table-column show-overflow-tooltip label="在馆数" min-width="40%" prop="book_inlibrary"></el-table-column>
      <el-table-column show-overflow-tooltip label="库存" min-width="40%" prop="book_stock"></el-table-column>
      <el-table-column label="借阅状态">
          <template slot-scope="scope">
            <span v-if="!scope.row.borrow_status">未借阅</span>
            <span v-else>已借阅</span>
          </template>
        </el-table-column>
      <el-table-column show-overflow-tooltip label="价格" min-width="40%" prop="price"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination @current-change="handlePageChange" :current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next" :total=totalItem>
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "booktable",
  //这边父组件的created函数中调用某个方法而方法会去请求接口，而这个请求是属于异步操作，此时会把异步操作放到消息队列中，等到后面的父子生命周期函数等一系列同步任务执行完成后，会执行异步任务。
  mounted() {
    //该例中数据在父组件拿到后才展示该组件部分、故可以放在created()中。正常应在数据更新后进行下列操作
    this.totalItem = this.tableData.length;
    let wholeTable = this.cloneObj(this.tableData); //编写时不希望组件内加一些编辑操作就会影响父页面数据；没有这个顾虑的话也可直接赋值
    this.allPages = [];
    for (let i = 0; i < wholeTable.length; i += this.pageSize) {
      this.allPages.push(wholeTable.slice(i, i + this.pageSize));
    }
    if (this.allPages.length > 0) {
      this.showPage = this.allPages[0];
    }
  },
  props: {
    //父组件传过来的参数
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      currentPage: 1,
      totalItem: 0,
      pageSize: 5,
      showPage: [],
      allPages: [],
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    //翻页操作
    handlePageChange(val) {
      this.currentPage = val;
      this.showPage = this.allPages[this.currentPage - 1];
    },
    //深度复制对象
    cloneObj(obj) {
      let newObj = {};
      if (typeof obj === "object") {
        if (obj instanceof Array) {
          newObj = [];
        }
        for (var key in obj) {
          let val = obj[key];
          newObj[key] = typeof val === "object" ? this.cloneObj(val) : val;
        }
        return newObj;
      } else {
        return obj;
      }
    },
  },
};
</script>

<style>
</style>
